<template>
<!-- 产品管理 -->
  <div class="ProducthHmPg">
  <div class="incolumn_countr">
     <hy-search
        class="hy_search"
        ref="query"
        :searchTitle="searchTitle"
        v-model="searcher"
          :button="{btnShowBy3:true}"
                :buttonText="{btnNameBy3:'新增产品'}"
        :col="6"
        @search="search"
          @clickbybtn3="clickBy3"
      ></hy-search>
          </div>
        <div class="table-box">
      <template>
            <el-table :data="tableData" style="width:100%" stripe :height=" autoHeightTable" show-overflow-tooltip>
        <el-table-column prop="xuhao" label="序号" width="100" align="center"></el-table-column>
          <el-table-column prop="productname" label="产品名称"  align="center"></el-table-column>
          <el-table-column prop="producttypr" label="产品类型" align="center"></el-table-column>
          <el-table-column prop="unit" label="产品单位"  align="center"></el-table-column>
          <el-table-column prop="processnumber" label="工序数" align="center"></el-table-column>
          <el-table-column prop="createon" label="创建时间" align="center"></el-table-column>
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
                <el-button type="warning" size="mini" @click="ProEdit(scope.row)">编辑</el-button>
            <el-button type="primary" size="mini" @click="ProDetail(scope.row)">详情</el-button>
            </template>
           
          </el-table-column>

        </el-table> 
              </template>
    </div>
        <template>
            <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
       
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
      ></el-pagination>
        </template>

  </div>
</template>

<script>
import axios from "axios";
export default {
  
components: {},
    computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 78;
    }
  },
  data() {
    return {
      total: 1,
      current:1,
      pagesize:11,
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入产品名称",
          prop: "customProductName"
        },
     
        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ],
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      tableData: [ ]
    };
  },
    created() {
     this.empno =JSON.parse(localStorage.getItem('empno'))
    this.getData(0);
    this.getDatas();
  },
  methods:{
     // 首页列表数据
        getData(page) {
        var obj={
            pn:page,
        PerPageSize: 11,
         key: this.searcher.customProductName ? this.searcher.customProductName: null,
        start: this.searcher.issuanceDate[0] ? this.searcher.issuanceDate[0]:'',
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1]:'',
        }
    var objs = JSON.stringify(obj);
      axios("/apis/ProductManagement.asmx/List_Product?index=1&jsondata="+objs+"&empno="+this.empno).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          console.log(datas)
          var list = JSON.parse(datas.string.__text);
          console.log(list);
   for (var i = 0; i < list.length; i++) {
          if(list[i].createon===null){
            this.createon==''
          }else{
          var ddd = new Date(parseInt(list[i].createon.substr(6, 13)));
          var y = ddd.getFullYear();
          var m = ddd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
           var d = ddd.getDate();
          d = d < 10 ? "0" + d : d;
          list[i].createon = y + "-" + m + "-" + d;
          list[i].xuhao = 1 + i + 11*page
          }
          }
     
          this.tableData = [];
        this.tableData = list;
   }
      )
        
      
    },
    //总页数
    getDatas() {
      var obj = {
        pn: 0,
        PerPageSize: 1000
        }
    var objs = JSON.stringify(obj);
      axios("/apis/ProductManagement.asmx/List_Product?index=1&jsondata="+objs+"&empno="+this.empno).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          var list= JSON.parse(datas.string.__text);
          console.log(list);
             this.total = list.length;
           
      
        }
      )
     },
         //筛选
    search(){
      this.getData(0);

      var obj = {
        start: "",
        end: "",
        pn: 0,
        PerPageSize: 10000,
        key: this.searcher.customProductName ? this.searcher.customProductName:null,
        start: this.searcher.issuanceDate[0] ? this.searcher.issuanceDate[0]:'',
       end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1]:'',
      };
      var objs = JSON.stringify(obj);
      axios("/apis/ProductManagement.asmx/Count_Product?index=1&jsondata="+objs+"&empno="+this.empno).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          console.log(datas)
          var lists = JSON.parse(datas.int.__text);
          console.log(lists)
                this.total = lists
        }
      )
    },


   //新增产品
     clickBy3() {
//var ids = "";
      this.$router.push("./AddProduct" );
    },
    //详情
    ProDetail(obj) {
      console.log(obj)

    var id = "";
   
      this.$router.push({ path: "./ProductDetail", query: { id: obj.productno,proname:obj.productname ,protype:obj.producttype,unit:obj.unit} });
    },
    
    //编辑
    ProEdit(obj) {
      var idss = "";
      this.$router.push({ path: "./EditProduct", query: { idss: obj.productno,proname:obj.productname ,protype:obj.producttype,unit:obj.unit } });
    },
    // 分页
    handleCurrentChange(e) {
      this.getData(e - 1);
    }
  }
  }
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.incolumn_countr{
  width: 97%;
}
.table-box{
  width: 98%;
  margin-left: 15px;
}
.el-pagination {
  margin-top: 15px;
  text-align: center;
}
</style>
<style >
.incolumn_countr .yy-search .btn {
  margin-left: 0px;
  margin-right: 45px;
}
</style>